<template>
  <a-breadcrumb
    style="font-size: 18px; font-weight: bold; margin: 10px 10px 10px 10px"
  >
    <a-breadcrumb-item>帮助</a-breadcrumb-item>
    <a-breadcrumb-item>参考价格</a-breadcrumb-item>
  </a-breadcrumb>
  <div class="Reference">
    <div class="line">
      <img src="@/assets/before.jpg" />
    </div>
    <div class="rule">
      <el-backtop></el-backtop>
      <h1>参考电价</h1>
      <p>根据统计，得到当前用户普遍的用电规律，如右图所示。</p>
      <p>为了使每天的用电规律更加平均，以减小电网的成本，同时使用户获取更多收益，我们采用 DSM 模型来确定分时电价，结果如下表所示。您可根据您的交易时间，合理报价。</p>
      <a-table :dataSource="dataSource" :columns="columns" />
    </div>
  </div>
</template>

<script>
export default {
    setup() {
      return {
        dataSource: [
          {
            key: '1',
            peroid: '谷时段',
            price: '16.72',
            category: '1, 2, 3, 4, 7',
          },
          {
            key: '2',
            peroid: '平时段',
            price: '47.30',
            category: '5, 6, 8, 9, 12, 13, 14, 15, 16, 22, 23, 24',
          },
          {
            key: '3',
            peroid: '峰时段',
            price: '74.32',
            category: '10, 11, 17, 18, 19, 20, 21',
          },
        ],

        columns: [
          {
            title: '时段',
            dataIndex: 'peroid',
            key: 'peroid',
          },
          {
            title: '价格（单位/分）',
            dataIndex: 'price',
            key: 'price',
          },
          {
            title: '所属时段（小时）',
            dataIndex: 'category',
            key: 'category',
          },
        ],
      };
    },
  };

</script>

<style scoped>
h1 {
  margin: 0 0 15pt 0;
}
p {
  text-align: left;
  text-indent: 2em;
  padding: 5pt 0;
  margin: 0 auto;
  width: 80%;
}
.el-table {
  padding: 15pt 20pt;
  margin: 0 auto 0 auto;
}
.Reference {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  height: 80%;
  padding:10px;
}
.line {
  margin: auto 0;
}
.rule {
  padding: 90pt 0;
}
</style>
